<template>
  <div class="base-count">
    <!-- <button @click="count--">-</button> -->
    <button @click="handleSub">-</button>
    <span>{{count}}</span>
    <!-- <button @click="count++">+</button> -->
    <button @click="handAdd">+</button>
  </div>
</template>

<script>
export default {
    // data 必须是一个 函数 -> 保证每个组件实例，可以维护独立的一个数据对象
    // 单向数据流
    // 1.自己的数据随便改 （谁的数据 谁负责）
    // data(){
    //     console.log('data函数执行了')
    //     return {
    //         count:999
    //     }
    // },
    // 2.外部传过来的数据 不能随便修改

    // 单向数据流：父组件的prop更新 会单向 向下流动，影响子组件
    //  父亲的数据变了 会单向 向儿子流动 影响儿子
    //  儿子想改父亲的数据 也不能直接改 而是通过$emit 通知 父亲，让父亲改
    //  父亲 改完 会再次 单向 流动 流向儿子 从而影响儿子
    props:{
      count:{
        type:Number
      }
    },
    methods:{
      handleSub() {
        // 子传父 $emit(事件名，参数)
        this.$emit('changeCount',this.count - 1)
      },
      handAdd() {
        this.$emit('changeCount',this.count + 1)
      }
    }

    // data:{
    //     count:999
    // }

}
</script>

<style scoped> 
.base-count {
    margin: 10px;
    font-size: 20px;
}
</style>